<template>
  <div style="background-color:#fff;padding:20px" class="userMain">
    <a-tabs default-active-key="1" @change="callback">
      <a-tab-pane key="1" tab="待处理">
        <a-row>
          <a-col :span="12">
            <a-select
              v-model="queryParam.flag"
              style="width:150px"
              @change="overTimeChange"
              placeholder="请选择通知类型"
            >
              <a-select-option value="">全部</a-select-option>
              <a-select-option value="1">超时</a-select-option>
              <a-select-option value="2">即将超时</a-select-option>
            </a-select>
          </a-col>
        </a-row>
        <a-table
          bordered
          :loading="tableLoading"
          rowKey="id"
          :pagination="false"
          :columns="columns"
          :dataSource="dataSource"
          size="middle"
        >
          <template slot="action" slot-scope="text, record">
            <a @click="detailsShowEvent(record)">详情</a>
          </template>

          <template slot="typeName" slot-scope="text, record">
            <span v-if="queryParam.roleType == 2">{{ text }}</span>
            <span v-if="queryParam.roleType == 1">催办通知</span>
          </template>
        </a-table>
        <a-row>
          <a-col :span="12"></a-col>
          <a-col :span="12" style="text-align:right">
            <a-pagination
              :show-total="total => `共有 ${total} 条数据`"
              :default-current="1"
              :total="total"
              @change="pageShow"
            />
          </a-col>
        </a-row>
      </a-tab-pane>
      <a-tab-pane key="2" tab="已处理">
        <a-row>
          <a-col :span="12">
            <a-select
              v-model="queryParam.flag"
              style="width:150px"
              placeholder="请选择通知类型"
              @change="overTimeChange"
            >
              <a-select-option value="">全部</a-select-option>
              <a-select-option value="1">超时</a-select-option>
              <a-select-option value="2">即将超时</a-select-option>
            </a-select>
          </a-col>
        </a-row>
        <a-table
          bordered
          :loading="tableLoading"
          rowKey="id"
          @change="pageShow"
          :pagination="false"
          :columns="columns"
          :dataSource="dataSource"
          size="middle"
        >
          <template slot="action" slot-scope="text, record">
            <a @click="detailsShowEvent(record)">详情</a>
          </template>

           <template slot="typeName" slot-scope="text, record">
            <span v-if="queryParam.roleType == 2">{{ text }}</span>
            <span v-if="queryParam.roleType == 1">催办通知</span>
          </template>
        </a-table>
        <a-row>
          <a-col :span="12"></a-col>
          <a-col :span="12" style="text-align:right">
            <a-pagination
              :show-total="total => `共有 ${total} 条数据`"
              :default-current="1"
              :total="total"
              @change="pageShow"
            />
          </a-col>
        </a-row>
      </a-tab-pane>
    </a-tabs>

    <!-- //详情 -->
    <DetailsModel v-if="detailsShow" @cancelEvent="cancelEvent" v-bind:infoListData="infoListData"></DetailsModel>
  </div>
</template>

<script>
import Vue from 'vue'
import AddIndex from '@/views/accountManage/addIndex'
import Authority from '@/views/accountManage/authority'
import { ROLE_NAME, USERINFO } from '@/store/mutation-types'
import { getNotices } from '@/api/public'
import DetailsModel from '@/views/UrgeManage/detailsModel'
export default {
  components: { AddIndex, Authority, DetailsModel },
  data() {
    return {
      total: 0,
      infoListData: {},
      pagination: {
        total: 0,
        showTotal: total => `共有 ${total} 条数据`
      },
      columns,
      dataSource: [],
      tableLoading: false,
      detailsShow: false,
      queryParam: { current: 1, pageSize: 10, type: 0 }
    }
  },
  created() {
    this.selectRight()
    this.getUrgeDataInfo()
  },
 
  mounted() {},
  methods: {
    //超时改变
    overTimeChange(e) {
      e.length == 0 ? delete this.queryParam.flag : ''
      this.getUrgeDataInfo()
    },
    //数据查询权限
    selectRight() {
      if (Vue.ls.get(ROLE_NAME) == '区县建设') {
        this.queryParam.roleType = 1
        this.this.queryParam = Vue.ls.get(USERINFO).belong
      } else if (Vue.ls.get(ROLE_NAME) == '客户经理') {
        this.queryParam.roleType = 2
        this.this.manager = Vue.ls.get(USERINFO).name
      } else {
        this.queryParam.roleType = 2
      }
    },
    selectEvent() {},
    //获取催办表格数据
    getUrgeDataInfo() {
      this.tableLoading = true
      getNotices(this.queryParam)
        .then(response => {
          this.current = response.data.current
          this.total = response.data.total
          this.dataSource = response.data.records
          this.tableLoading = false
        })
        .catch(error => {
          this.tableLoading = false
        })
    },
    //分页
    pageShow(current) {
      this.tableLoading = true
      this.queryParam.current = current
      getNotices(this.queryParam)
        .then(response => {
          this.current = response.data.current
          this.total = response.data.total
          this.dataSource = response.data.records
          this.tableLoading = false
        })
        .catch(error => {
          this.tableLoading = false
        })
    },
    //菜单切换
    callback(key) {
      key == 1 ? (this.queryParam.type = 0) : (this.queryParam.type = 1)
      this.getUrgeDataInfo()
    },
    //取消
    cancelEvent() {
      this.detailsShow = false
    },
    //详情
    detailsShowEvent(info) {
      this.infoListData.id = info.urgingId
      this.detailsShow = true
    }
  }
}

const columns = [
  {
    title: '通知类型',
    dataIndex: 'typeName',
    width: '9.75%',
    align: 'center',
    ellipsis: true,
    scopedSlots: { customRender: 'typeName' }
  },

  {
    title: 'crm号',
    dataIndex: 'crmNo',
    width: '9.75%',
    align: 'center',
    ellipsis: true,
    scopedSlots: { customRender: 'crmNo' }
  },
  {
    title: '区县',
    dataIndex: 'country',
    width: '9.75%',
    align: 'center',
    ellipsis: true,
    scopedSlots: { customRender: 'country' }
  },
  {
    title: '派单时间', //省市级
    dataIndex: 'time',
    width: '9.75%',
    align: 'center',
    ellipsis: true,
    scopedSlots: { customRender: 'time' }
  },

  {
    title: '操作',
    dataIndex: 'action',
    width: '3%',
    align: 'center',
    ellipsis: true,
    scopedSlots: { customRender: 'action' }
  }
]
</script>

<style scoped>
.userMain {
  min-height: 900px;
}
</style>
